<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            background-color: #CCC;
        }
        
        .search-box {
            width: 700px;
            margin: 0 auto;
            background-color: white;
            margin-top: 20px;
        }
        
        .search-func-box {
            width: 600px;
            height: 100px;
            margin: 0 auto;
            vertical-align: middle;
            padding-top: 75px;
        }
        
        .search-word {
            width: 396px;
            height: 44px;
        }
        
        .search-btn {
            width: 200px;
            height: 50px;
        }
        
        .show-list {
            width: 600px;
            height: 220px;
            margin: 0 auto;
            margin-bottom: 40px;
        }
        
        .show-list li {
            height: 100px;
        }
        
        .bottom-box {
            width: 600px;
            height: 100px;
            margin: 0 auto;
        }
        
        .btn-pri {
            float: left;
            display: none;
        }
        
        .btn-next {
            float: right;
            display: none;
        }
    </style>
</head>

<body>
    <div class="search-box">
        <div class="search-func-box">
            <input type="text" class="search-word"><button class="search-btn">搜索</button>
        </div>

        <div class="show-list">
            <ul>

            </ul>
        </div>
        <div class="bottom-box">
            <button class="btn-pri">上一页</button>
            <button class="btn-next">下一页</button>
        </div>
    </div>

    <script>
        window.onload = function() {
            var searchWords = [{
                keyWords: "html|javascript|css",
                content: "如何学习html，javascript，css"
            }, {
                keyWords: "html|css",
                content: "网页布局指南"
            }, {
                keyWords: "javascript",
                content: "javascript高级编程"
            }, {
                keyWords: "html|javascript|css",
                content: "整站编程"
            }, {
                keyWords: "html|java",
                content: "丑比鸿"
            }, {
                keyWords: "html|php",
                content: "小鸿鸿"
            }, {
                keyWords: "abc|hde",
                content: "鸿鸿"
            }, {
                keyWords: "html|javascript|css",
                content: "如何学习html，javascript，css"
            }, {
                keyWords: "html|css",
                content: "网页布局指南"
            }, {
                keyWords: "javascript",
                content: "javascript高级编程"
            }, {
                keyWords: "html|javascript|css",
                content: "整站编程"
            }, {
                keyWords: "html|java",
                content: "丑比鸿"
            }, {
                keyWords: "html|php",
                content: "小鸿鸿"
            }, {
                keyWords: "abc|hde",
                content: "鸿鸿"
            }];

            var resultArry = [];
            var pageLength = 3;

            var btnSearch = document.querySelector(".search-btn");
            var btnPri = document.querySelector(".btn-pri");
            var btnNext = document.querySelector(".btn-next");
            var list = document.querySelector(".show-list ul")

            btnNext.style.display = "none";
            btnPri.style.display = "none";
            var page = 1;

            var show = function() {
                var htmlContent = "";
                var pageL = pageLength;
                var base = (page - 1) * pageLength;
                console.log(page * pageLength);
                if (resultArry.length < page * pageLength) {
                    pageL = resultArry.length - base;
                }
                console.log(pageL);
                if (resultArry.length > page * pageLength) {
                    btnNext.style.display = "block";
                }
                if (pageL < pageLength) {
                    btnNext.style.display = "none";
                }
                if (base > 1) {
                    btnPri.style.display = "block";
                }
                if (base < 1) {
                    btnPri.style.display = "none";
                }
                for (var i = 0; i < pageL; i++) {
                    htmlContent = htmlContent + "<li>第" + (i + 1 + base) + "项:" + resultArry[base + i].content + "</li>";
                }
                // console.log(resultArry[1].content);
                console.log(htmlContent);
                list.innerHTML = htmlContent;


            }


            btnSearch.addEventListener("click", function(e) {
                console.log("搜索所需要的数据")
                var searchWord = document.querySelector(".search-word");
                var searchValue = searchWord.value;
                console.log(searchValue);
                if (searchValue === " ") {
                    return;
                }
                resultArry = [];
                for (var i = 0; i < searchWords.length; i++) {
                    var keyWords = searchWords[i].keyWords.split("|");
                    for (var j = 0; j < keyWords.length; j++) {
                        if (searchValue == keyWords[j]) {
                            resultArry.push(searchWords[i]);
                            break;
                        }
                    }
                }
                console.log(resultArry);



                show();
            });

            btnPri.addEventListener("click", function(e) {
                console.log("上一页")
                page--;
                show();
            });

            btnNext.addEventListener("click", function(e) {
                console.log("下一页")
                page++;
                show();
            });
        }
    </script>

</body>

</html>